<template>
  <bi-page
    id="gl-bulletinBoard"
    :title="(areaName=='全部'?'全市':areaName)+'隔离点'"
    sub-text="看板"
    :banner="true"
  >
    <bi-panel>
      <div class="gl-bulletinBoard-nav">
        <bi-county-select
          :value="areaId"
          :data="areaArr"
          @change="handleCountyChange"
        ></bi-county-select>
      </div>
      <el-row class="gl-bulletinBoard__content">
        <el-col :span="24">
          <div class="middle-info">
            <total-all-info :isolate-collect-vo="isolateCollectVo" />
          </div>
        </el-col>
      </el-row>
    </bi-panel>
    <bi-panel>
      <div class="gl-bullectionBoard__filter">
        <bi-isolation-select v-model="filter.isolation" @change="handleIsolationChange"></bi-isolation-select>
      </div>
      <el-row class="gl-bulletinBoard__content">
        <el-col :span="24">
          <ul class="hotel_con">
            <li
              class="area-item"
              :class="{'is-hidden': panelHiddenStateMap[index]}"
              v-for="(area, index) in displayAreaHotelList"
              :key="area.areaId"
            >
              <div class="area-info" v-if="tipIndex == index">
                <div class="area-detail">
                  <div class="area-detail-label">隔离点数</div>
                  <div class="area-detail-num">{{ area.glds }}</div>
                </div>
                <div class="area-detail">
                  <div class="area-detail-label">空房间数</div>
                  <div class="area-detail-num">{{ area.kfjs }}</div>
                </div>
                <div class="area-detail">
                  <div class="area-detail-label">总房间数</div>
                  <div class="area-detail-num">{{ area.zfjs }}</div>
                </div>
                <div class="area-detail">
                  <div class="area-detail-label">隔离人员数</div>
                  <div class="area-detail-num">{{ area.glrys }}</div>
                </div>
                <div class="area-detail">
                  <div class="area-detail-label">关爱人员数</div>
                  <div class="area-detail-num">{{ area.garys }}</div>
                </div>
                <div class="area-detail">
                  <div class="area-detail-label">十大症状数</div>
                  <div class="area-detail-num">{{ area.sdzzs }}</div>
                </div>
              </div>
              <div class="area_name" @click="handleTogglePanelExpand(index)">
                <span class="area_name-title" @click.stop="showTip(index)">
                  <img class="before" src="./images/marke.png" />
                  <span>
                    {{ area.areaName
                    }}{{ `(${area.hotelArr ? area.hotelArr.length : 0})` }}</span
                  >
                </span>
                <!--暂时去掉右侧的展开箭头，因为暂时来不及做展开收起的交互-->
                <img v-if="enablePanelHiddenToggle" class="after" src="@/assets/icon/arrow/down.png" alt=""/>
              </div>
              <ul class="hotel_list">
                <!--component hotel item-->
                <li v-for="(hotel, num) in area.hotelArr" :key="num">
                  <hotel-item :hotel="hotel" />
                </li>
              </ul>
              <div class="clearboth"></div>
            </li>
          </ul>
        </el-col>
      </el-row>
    </bi-panel>
  </bi-page>
</template>
<script>
import BiPage from 'board/common/page'
import BiPanel from 'board/common/panel'
import BiCountySelect from 'board/common/county-select'
import BiIsolationSelect from 'board/common/isolation-select'
import { getNavList, getStatusList } from './api/bulletinboard.js'
import HotelItem from "./components/hotelItem";
export default {
  components: {
    BiPage,
    BiPanel,
    BiCountySelect,
    BiIsolationSelect,
    HotelItem,
    TotalAllInfo: () => import('./components/totalAllInfo'),
    ExplainList: () => import('./components/explainList'),
    HeaderTop: () => import('./components/headerTop')
  },
  data () {
    return {
      tipIndex: -1,
      areaId: '',
      areaName: '全部',
      pickerShow: false,
      filter: {
        isolation: []
      },
      areaArr: [
        {
          value: '',
          label: '全部',
        },
      ],
      curNav: 0,
      areaId: 0,
      subText: '看板',
      panelHiddenStateMap: {},
      isolateCollectVo: {},
      isolateDataVoMap: {},
      areaHotelList: [],
      displayAreaHotelList: {},
      manage: ''
    }
  },
  computed: {
    totalIcon () {
      return require(`@/assets/icon/arrow/${this.curNav ? 'down.png' : 'up.png'}`)
    },
    pageTitle () {
      return this.curNav ? '隔离点看板' : '全市隔离点看板'
    },
    enablePanelHiddenToggle () {
      return this.areaId === ''
    }
  },
  watch: {
    areaHotelList (areaHotelList) {
      if (this.manage === "") {
        this.displayAreaHotelList = areaHotelList;
        this.displayAreaHotelList.forEach((area) => {
          area.glds = area.hotelArr.length; // 隔离点数
          area.showTip = false
          area.kfjs = 0
          area.zfjs = 0
          area.glrys = 0
          area.garys = 0
          area.sdzzs = 0
          area.hotelArr.forEach(item => {
            area.kfjs += item.leaveTotal  // 空房间数
            area.zfjs += item.houseTotal  // 总房间数
            area.glrys += item.isolatePersonTotal  // 隔离人员数
            area.garys += item.followTotal  // 关爱人员数
            area.sdzzs += item.tenSymptomNum  // 十大症状数
            // item.inState='02'
          })
        })
        // console.log('this.displayAreaHotelList', this.displayAreaHotelList)
        return;
      }
      const newAreaHotelList = [];
      areaHotelList.forEach((area) => {
        const newArea = { ...area };
        newArea.hotelArr = this.manage
          ? area.hotelArr.filter((hotel) => hotel.isolatePersonTotal > 0)
          : area.hotelArr.filter((hotel) => hotel.isolatePersonTotal === 0);
        // newArea.hotelArr = area.hotelArr.filter(hotel => (hotel.isManage === this.manage))
        newAreaHotelList.push(newArea);
      });
      this.displayAreaHotelList = newAreaHotelList;
    },
  },
  mounted: function () {
    this.$nextTick(function () {
      this.loadNavFn().then(() => {
        let { code } = this.$route.query;
        const item = this.areaArr.find(v => v.value === code)
        if (item) {
          this.selectNavFn(item, true);
        } else {
          this.loadHotelFn()
        }
      })
    })
  },
  methods: {
    handleTogglePanelExpand (index) {
      if (!this.enablePanelHiddenToggle) {
        return
      }
      if (this.panelHiddenStateMap[index]) {
        this.$set(this.panelHiddenStateMap, index, false)
      } else {
        this.$set(this.panelHiddenStateMap, index, true)
      }
    },
    handleIsolationChange () {
      this.selectFn()
    },
    showPicker() {
      this.pickerShow = true
    },
    showTip(index) {
      this.tipIndex = this.tipIndex == index ? -1 : index
    },
    backFn: function () {
      this.$router.go(-1)
    },
    loadNavFn: function () {
      return getNavList().then((res) => {
        this.areaArr = this.areaArr.concat(res.data.data)
      })
    },
    loadHotelFn: function () {
      getStatusList({
        belongto: '',
        hotelType: this.filter.isolation.filter(v => v != 99),
        inState: this.filter.isolation.some(v => v == 99)?'02':undefined,
      }).then((res) => {
        var reData = res.data.data
        this.isolateCollectVo = reData.isolateCollectVo
        this.isolateDataVoMap = reData.isolateDataVoMap
        this.areaHotelList = this.formatAreaData(reData.isolateDataVoMap)
        // this.areaHotelList = reData.isolateDataVoMap
      })
    },
    handleCountyChange ({item}) {
      this.selectNavFn(item)
    },
    selectNavFn: function (val, syncDataVoMap) {
      this.areaId = val.value
      this.areaName = val.label
      this.pickerShow = false
      getStatusList({
        belongto: val.value,
        hotelType: this.filter.isolation.filter(v => v != 99),
        inState: this.filter.isolation.some(v => v == 99)?'02':undefined,
      }).then((res) => {
        var reData = res.data.data
        this.panelHiddenStateMap = {}
        this.isolateCollectVo =reData.isolateCollectVo// this.formatAreaTotalData(reData.isolateCollectVo)
        this.areaHotelList = this.formatAreaData(reData.isolateDataVoMap)
        if (syncDataVoMap === true) {
          this.isolateDataVoMap = reData.isolateDataVoMap
        }
      })
    },
    formatAreaData(isolateDataVoMap) {
      const areaHotelList = [];
      for (let areaKey in isolateDataVoMap) {
        const areaItem = this.areaArr.find(
          (i) => `A${String(i.value)}` === areaKey
        );
        if (areaItem) {
          const area = {
            areaId: areaKey,
            areaName: areaItem.label,
            hotelArr: isolateDataVoMap[areaKey]
          };
          areaHotelList.push(area);
        }
      }
      return areaHotelList;
    },
    selectFn: function () {
      getStatusList({
        belongto: this.areaId,
        hotelType: this.filter.isolation.filter(v => v != 99),
        inState: this.filter.isolation.some(v => v == 99)?'02':undefined,
      }).then((res) => {
        var reData = res.data.data
        this.isolateCollectVo = reData.isolateCollectVo//this.formatAreaTotalData(reData.isolateCollectVo)
        this.areaHotelList =this.formatAreaData(reData.isolateDataVoMap)
      })
    }
  },
  created() {
    let { filterType } = this.$route.query;
    this.filterType = filterType;
  },
}
</script>
<style lang="scss" scoped>
.middle-info {
  display: flex;
  width: 100%;
}
.gl-bullectionBoard__filter{
  padding-top: 15px;
}
.middle-r {
  height: 82px;
  margin-left: auto;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .middle-r-s {
    display: flex;
    justify-content: flex-end;
    .switchStyle {
      /deep/ .el-switch__core {
        width: 176px !important;
        height: 40px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        position: relative;

        &::after {
          width: 28px;
          height: 28px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      /deep/ .el-switch__label {
        position: absolute;
        left: 0;
        top: 0;
      }
      /deep/ .el-switch__label--right {
        color: #ffffff;
        white-space: nowrap;
        left: 30px;
      }
    }
    .switchStyleTrue {
      /deep/ .el-switch__core {
        &::after {
          width: 28px;
          height: 28px;
          top: 50%;
          margin-left: -30px;
          transform: translateY(-50%);
        }
      }
    }
  }
}
.hotel_con {
  margin-top: 10px;
  .area-item{
    position: relative;
    &.is-hidden{
      .hotel_list{
        display: none;
      }
      .area_name{
        .after{
          transform: rotate(180deg);
        }
      }
    }
  }
  .area_name{
    font-size: 18px;
    color: #2881E2;
    line-height: 25px;
    padding: 5px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    img:not(.after){
      width: 13px;
      height:15px;
    }
    .after{
      width: 16px;
      height: 16px;
    }
  }
  .area-info {
    position: absolute;
    z-index: 10;
    left: 13px;
    top: 42px;
    width:120px;
    padding: 7px 10px;
    background: rgba(157, 164, 170, 0.9);
    border-radius: 3px;
    &::before{
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 7px solid rgba(157, 164, 170, 0.9);
      position: absolute;
      left: 50px;
      top: -5px;
    }
    .area-detail {
      display: flex;
      font-size: 12px;
      color: #fff;
      line-height: 18px;
      .area-detail-label {
        width: 70%;
      }
      .area-detail-num {
        flex: 1;
      }
    }
  }
}
</style>
